<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="supplierDetail.title"/></title>
    <meta name="heading" content="<fmt:message key='supplierDetail.heading'/>"/>
    <meta name="menu" content="RoleAdminPurchase"/>
    <script type="text/javascript">
        dojo.event.topic.subscribe("/save", function(data, type, request) {
            if(type == "load") {
                dojo.byId("phoneIndex").value = "";
                dojo.byId("phoneIndex1").value = "";
                dojo.byId("phoneId").value = "";
                dojo.byId("phoneType").value = "";
                dojo.byId("phoneNumber").value = "";
                dojo.byId("phoneIdPerson").value = "";

                document.getElementById('deletePhoneForm').style.display = 'none';

                $('addPhoneButton').appear();
                Effect.SlideUp('divPhoneForm');
                return false;
            }
        });
        function editPhone(row){
            dojo.byId("phoneIndex").value = row.rowIndex - 1;
            dojo.byId("phoneIndex1").value = row.rowIndex - 1;

            var tds = row.getElementsByTagName("td");

            dojo.byId("phoneId").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
            dojo.byId("phoneType").value = dojo.string.trim(dojo.dom.textContent(tds[1]));
            dojo.byId("phoneNumber").value = dojo.string.trim(dojo.dom.textContent(tds[2]));
            dojo.byId("phoneIdPerson").value = dojo.string.trim(dojo.dom.textContent(tds[3]));

            document.getElementById('deletePhoneForm').style.display = 'inline';

            $('addPhoneButton').fade();
            Effect.SlideDown('divPhoneForm');
            return false;
        }
    </script>
</head>
<div id="help">
    <h2>
        <a href="<c:url value='helpSupplierForm.html?decorate=false'/>"
           title="Help form supplier"
           onclick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">
               <fmt:message key="help"/>
        </a>
    </h2>
</div>
    <s:form id="supplierForm" action="saveSupplier" method="post" >
        <s:hidden name="supplier.id" value="%{supplier.id}"/>

        <s:textfield key="supplier.razonSocial" required="true" cssClass="text semilarge"/>
        <s:textfield key="supplier.address" required="true" cssClass="text semilarge"/>
        <s:textfield key="supplier.nit" cssClass="text medium"/>

        <s:textfield label="%{getText('person.firstName')}" name="supplier.firstName" value="%{supplier.firstName}" required="true" cssClass="text medium"/>
        <s:textfield label="%{getText('person.lastName')}" name="supplier.lastName" value="%{supplier.lastName}" required="true" cssClass="text medium"/>
        <s:textfield label="%{getText('person.lastName2')}" name="supplier.lastName2" value="%{supplier.lastName2}" required="true" cssClass="text medium"/>

        <li class="buttonBar bottom">
            <s:submit cssClass="button" method="save" key="button.save" theme="simple"/>
            <c:if test="${not empty supplier.id}">
                <s:submit cssClass="button" method="delete" key="button.delete" onclick="return confirmDelete('supplier')" theme="simple"/>
            </c:if>
            <s:submit cssClass="button" method="cancel" key="button.cancel" theme="simple"/>
        </li>
    </s:form>
    <div id="divPhone" style="position: absolute; left: 500px;" >
        <s:url id="phonesListUrl" action="ajaxPhone" method="refreshPhoneList">
            <s:param name="decorate" value="false" />
        </s:url>

        <s:div id="phones" theme="ajax" href="%{phonesListUrl}" loadingText="%{getText('ajax.loading')}..."/>
        
        <div id="divPhoneForm" style="width: 243px; display: none;" >
            <s:form action="saveAjaxPhone" method="get" validate="true">
                <s:hidden name="decorate" value="false"/>
                <s:hidden id="phoneIndex" name="phoneIndex"/>
                <s:hidden id="phoneId" name="phone.id"/>
                <s:textfield id="phoneType" label="%{getText('phone.type')}" name="phone.type" required="true" cssClass="text medium"/>
                <s:textfield id="phoneNumber" label="%{getText('phone.number')}" name="phone.number" required="true" cssClass="text medium"/>
                <s:hidden id="phoneIdPerson" name="phone.person.id" />
                <s:submit cssClass="buttonPhone" key="button.savePhone" theme="ajax" targets="phones" notifyTopics="/save" cssStyle="position: relative; right: 123px;"/>
            </s:form>
            <s:form id="deletePhoneForm" action="deleteAjaxPhone" method="get" validate="true" cssStyle="display: none;">
                <s:hidden name="decorate" value="false"/>
                <s:hidden id="phoneIndex1" name="phoneIndex"/>

                <s:submit cssClass="buttonPhone" key="button.deletePhone" onclick="return confirmDelete('phone');" theme="ajax" targets="phones" notifyTopics="/save" cssStyle="position: absolute; left: 123px; bottom: 11px;"/>
            </s:form>
        </div>
        <input id="addPhoneButton" type="button" class="buttonPhone" value="<fmt:message key="button.addPhone"/>" onclick="$(this).fade(); Effect.SlideDown('divPhoneForm'); return false;"/>
    </div>
<script type="text/javascript">
    Form.focusFirstElement($("supplierForm"));

    document.getElementById('divPhone').style.top = document.getElementById('supplierForm').offsetTop+"px";
</script>